refactor(web): migrate website to bun and modernize the stack#2328
refactor(web): migrate website to bun and modernize the stack#2328brndnmtthws merged 1 commit intomainfrom
Conversation
✅ Deploy Preview for conkyweb canceled.
|
c7d9618 to
8396a96
Compare
8396a96 to
5d3aaee
Compare
5d3aaee to
99b0d48
Compare
There was a problem hiding this comment.
Pull request overview
Migrates the web/ site from an npm/package-lock based workflow to Bun (lockfile, scripts, CI, and Netlify), while modernizing the Next.js/Tailwind/ESLint stack and polishing UI/docs rendering.
Changes:
- Switch dependency management and automation from npm to Bun across local scripts, Netlify, and GitHub Actions.
- Modernize tooling/config (ESLint flat config, TS config, Tailwind/PostCSS) and update UI components/icons.
- Refresh docs/content and adjust docs rendering/search interactions.
Reviewed changes
Copilot reviewed 40 out of 44 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| web/utils/tailwind-preset.js | Updates Tailwind preset module style and removes legacy variants config. |
| web/utils/search.ts | Uses import type for Fuse types. |
| web/utils/mdx-utils.ts | Refactors gray-matter parsing + sorting; continues HTML generation pipeline for documents. |
| web/utils/build-meta.ts | Adds build metadata helper sourced from NEXT_PUBLIC_* env vars. |
| web/tsconfig.json | Updates TS target/module resolution/JSX settings for the modern Next stack. |
| web/tailwind.config.js | Updates Tailwind content globs (adds MDX/utils/styles) and removes legacy options. |
| web/styles/globals.css | Migrates to Tailwind v4-style CSS entry and adds base theme styles. |
| web/scripts/write-search-index.ts | Uses void main() to satisfy linting/promise handling. |
| web/postcss.config.js | Switches PostCSS plugin configuration to @tailwindcss/postcss. |
| web/pages/variables.tsx | Type-only import cleanup; makes getStaticProps synchronous. |
| web/pages/lua.tsx | Type-only import cleanup; makes getStaticProps synchronous. |
| web/pages/index.tsx | UI/content refresh; replaces custom arrow icon with Lucide. |
| web/pages/documents/[slug].tsx | Reworks document rendering approach (now injects HTML directly). |
| web/pages/config_settings.tsx | Type-only import cleanup; makes getStaticProps synchronous. |
| web/pages/_document.tsx | Adds inline theme initialization script + favicon and hydration suppression. |
| web/pages/_app.tsx | Type-only import for AppProps. |
| web/package.json | Migrates scripts to Bun; updates deps/devDeps and declares Bun engine; adjusts start/lint commands. |
| web/next.config.mjs | Adds static export output + injects build env vars and git hash retrieval. |
| web/next-env.d.ts | Updates TS reference docs link; adds route types import. |
| web/netlify.toml | Switches Netlify build to Bun and publishes static out/. |
| web/global.d.ts | Removes next/config runtime config typing (no longer used). |
| web/eslint.config.mjs | Adds ESLint v10 flat config with TS type-aware rules and Next/a11y/hooks integration. |
| web/documents/syntax-highlighting.mdx | Copy editing / formatting improvements. |
| web/documents/docker.mdx | Copy editing / formatting improvements. |
| web/documents/contributing.mdx | Copy editing / formatting improvements. |
| web/documents/compiling.mdx | Copy editing / formatting improvements. |
| web/documents/about.mdx | Copy editing / formatting improvements. |
| web/cypress/.eslintrc.json | Removes legacy Cypress ESLint config (superseded by flat config). |
| web/components/ThemeSwitcher.tsx | Replaces inline SVG icons with Lucide icons; restyles component. |
| web/components/Search.tsx | Improves search modal UX (focus behavior), modernizes imports, and refactors rendering. |
| web/components/Layout.tsx | Refactors dark-mode initialization to rely on document class; updates layout styling. |
| web/components/Header.tsx | Replaces custom GitHub icon with Lucide; updates header layout/styling. |
| web/components/GitHub.tsx | Removes custom GitHub SVG component. |
| web/components/Footer.tsx | Switches from next/config runtime config to buildMeta env-based metadata. |
| web/components/Docs.tsx | Type-only import cleanup and icon swap to Lucide; minor strict equality fixes. |
| web/components/ArrowIcon.tsx | Removes custom ArrowIcon component (replaced by Lucide usage). |
| web/.eslintrc.json | Removes legacy ESLint config (superseded by flat config). |
| doc/variables.yaml | Copy editing / consistency improvements in YAML doc source. |
| doc/lua.yaml | Copy editing / consistency improvements in YAML doc source. |
| doc/config_settings.yaml | Copy editing / consistency improvements in YAML doc source. |
| doc/README.md | Improves formatting/wording and Markdown consistency. |
| .github/workflows/web.yml | Updates CI to install/run with Bun and newer Node runtime. |
| <article | ||
| className="prose dark:prose-invert" | ||
| dangerouslySetInnerHTML={{ __html: source }} | ||
| /> |
There was a problem hiding this comment.
This page renders the document HTML via dangerouslySetInnerHTML. Because the HTML is produced from markdown processing that currently allows raw HTML, this creates an XSS vector (e.g., a <script> tag in an .mdx file will be emitted and executed). Consider sanitizing the HTML (e.g., rehype-sanitize with an allowlist) or disabling raw HTML in the markdown pipeline and rendering only safe constructs.
| .use(remarkRehype, {allowDangerousHtml: true}) | ||
| // .use(rehypePrism) | ||
| .use(rehypeStringify, {allowDangerousHtml: true}) | ||
| .process(content) | ||
| .process(parsed.content) |
There was a problem hiding this comment.
The markdown-to-HTML pipeline enables allowDangerousHtml and returns a raw HTML string. With the page now injecting that HTML into the DOM, any raw HTML present in the source will be preserved (including potentially unsafe tags/attributes). Prefer adding an HTML sanitization step (e.g., rehype-sanitize) and/or removing allowDangerousHtml unless there's a strong need for arbitrary HTML in docs.
| "build": "bun run write-search-index && next build", | ||
| "start": "next start", | ||
| "lint": "eslint .", |
There was a problem hiding this comment.
With next.config.mjs setting output: 'export', next start is typically not supported (static export produces an out/ directory meant to be served by a static file server). Update the start script to something that can serve the exported output (or remove it) to avoid a broken bun start path for contributors.
Summary
This branch migrates the website from the old npm-based workflow to Bun and updates the web stack to current tooling and conventions.
The core of the change is replacing the remaining npm/package-lock assumptions in the web app, Netlify config, and GitHub Actions workflow with a Bun-based setup centered on
bun.lockandbun run. Around that migration, the branch also modernizes the website's linting and frontend plumbing so the current Next.js/Tailwind/React stack works cleanly end to end.What Changed
The diff against
mainincludes four main areas of work.First, the package-management and CI/deploy flow was migrated from npm to Bun. This removes
web/package-lock.json, addsweb/bun.lock, updates the web package metadata to declare Bun explicitly, switches Netlify to a Bun-aware build environment, and updates.github/workflows/web.ymlso the PR web job installs dependencies and runs checks with Bun instead of expectingpackage-lock.jsonandnpm ci.Second, the website tooling was updated to match the newer stack. The old ESLint config files were removed and replaced with a flat ESLint 10 configuration, the React/Next/Tailwind-related lint setup was modernized, and several TypeScript and config files were adjusted to align with the current dependency set.
Third, the frontend itself was cleaned up to fit the updated stack and restore polish. This includes replacing local icon wrappers with Lucide-based usage where appropriate, tightening the header and control alignment, cleaning up the global theme/Tailwind behavior, fixing the search dialog so keyboard shortcuts focus the input immediately, and addressing related supporting changes in layout, metadata, and docs rendering helpers.
Fourth, the website copy and generated docs were revised for quality. That work covers both the MDX pages under
web/documents/and the YAML documentation sources underdoc/, improving grammar, consistency, readability, and wording without changing the underlying technical intent.Why
The website had drifted into a mixed state where local scripts, deployment, CI, linting, and frontend behavior were no longer fully aligned with one another. Bun had already become part of the local web workflow, but the repository still carried npm-era lockfile and CI assumptions. At the same time, the site had accumulated some rough edges in styling, interaction behavior, and documentation quality.
This branch brings those pieces back into alignment so the web app uses one package-management path, one CI path, and one modernized toolchain.
Validation
I validated the branch with:
bun run lintbun run buildNotes
The build still emits the existing
baseline-browser-mappingstaleness warning. That warning is pre-existing and unrelated to the migration work in this branch.